<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用 JavaScript 来绘制图像</title>
</head>

<body>
    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>

    <script>
        // 找到canvas元素
        var c = document.getElementById("myCanvas");
        // 创建context对象  getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
        var ctx = c.getContext("2d");
        // 下面的两行代码绘制一个红色的矩形：
        ctx.fillStyle = "#FF0000"; // 设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑色）。
        ctx.fillRect(0, 0, 150, 75); // fillRect(x,y,width,height) 方法定义了矩形当前的填充方式。
    </script>
</body>

</html>